<template>

  <scroll-view @scrolltolower="handleToLower" scroll-y v-if="recommends.length>0" class="recommend_view">
    <!-- 推荐开始 -->
    <view class="recommend_wrap">
      <navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`">
        <image :src="item.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 推荐结束 -->
    <!-- 月份开始 -->
    <view class="months-wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{monthes.DD}}/</text>
            {{monthes.MM}} 月            
          </view>
          <view class="months_text">
              {{monthes.title}}
          </view>          
        </view>
        <view class="months_title_more">更多></view>
      </view>
      <view class="months_content">
        <view class="months_item" v-for="(item,index) in monthes.items" :key="item.id">
          <go-detail :list="monthes.items" :index="index">
            <image :src="item.thumb + item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
          </go-detail>
        </view>
      </view>      
    </view>
    <!-- 月份结束 -->

    <!-- 热门开始 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
      
        <view class="hot_item" v-for="(item,index) in hotList" :key="item.id">
            <go-detail :list="hotList" :index="index">
               <image :src="item.thumb" mode="widthFix"></image>
            </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门结束 -->
  </scroll-view>
</template>

<script>
import moment from 'moment';
import goDetail from '@/components/goDetail';
export default {
  components:{
    goDetail
  },
  data() {
    return {
      //推荐列表
      recommends: [],
      // 月份模块列表
      monthes:{},
      // 热门列表：
      hotList:[],
      // 请求参数：
      params:{
        // 获取热门列表数据条数
        limit: 30,
        // 关键词
        order: "hot",
        // 跳过几条：
        skip: 0
      },
      // 表示是否还有下一页
      hasMore:true
    };
  },
  mounted() {
    this.getList()
  },
  methods:{
    // 获取接口数据：
    getList(){
      this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data:this.params
      }).then(res => {
        if(res.res.vertical.length===0){
          this.hasMore=false;
          uni.showToast({
            title:'没有数据了',
            icon:'none'
          })
          return
        }
         // 是否是第一次加载
        if(this.recommends.length===0){
        // 推荐模块
        this.recommends = res.res.homepage[1].items;
        // 月份模块
        this.monthes=res.res.homepage[2];
        // 将时间戳转换成18号/月
        this.monthes.MM=moment(this.monthes.stime).format('MM');
        this.monthes.DD=moment(this.monthes.stime).format('DD');
        console.log(res);
        }
        // 获取热门数据列表
        // this.hotList=res.res.vertical;
        // 滑底新增hot列表数据---es6拼接数组:
        this.hotList=[...this.hotList,...res.res.vertical];
      });
    },
    // 滚动条触底事件
    handleToLower(){
      // 1.修改请求参数 skip+=limit;
      // 2.重新发送请求
      // 3.hot列表数据的叠加 push
      if(this.hasMore){
        this.params.skip+=this.params.limit;
        this.getList()
      }else{
        // 弹窗提示用户没有数据了
        uni.showToast({
          title:'没有数据了',
          icon:'none'
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.recommend_view{
  // 屏幕的高度 - 头部标题的高度 地下的tabbar不用管，小程序已经剔除出去了
  height: calc( 100vh - 36px );
}
.recommend_wrap{
  display: flex;
  flex-wrap:wrap;
  .recommend_item{
    width: 50%;
    border:5rpx solid #fff
  }
}

.months-wrap {
  .months_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .months_title_info {
      color:$color;
      font-size: 30rpx;
        font-weight: 600;
        display: flex;
      .months_info {
        text {
          font-size: 36rpx;
        }
      }
      .months_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }
    .months_title_more {
      font-size: 24rpx;
       color:$color;
    }
  }

  .months_content {
    display: flex;
    flex-wrap: wrap;
    .months_item{
      width: 33.333%;
      border:5rpx solid #fff;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text{
      border-left:5rpx solid $color;
      font-size: 34rpx;
      padding-left: 20rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.33%;
      border:5rpx solid #fff;
      image {

      }
    }
  }
}
</style>